<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>


<!--

	流程


子组件的数据先遍历出来，通过监听事件(如单击，在子组件中自定义一个方法处理（该方法为发射自定义事件this.$emit('item-click',item)）)

父组件通过  监听子组件发射的自定义事件  通过自定义方法进行处理
 



btnClick(item){
     this.$emit('aa',item)
}

$emit  用于自定义发射一个事件,  aa表示该事件名称,item主要是给该事件传递参数

父组件  通过 v-on监听 子组件发射出来的事件   如  v-on:aa或@aa


@aa="bb"

这个 bb是父组件模板监听到aa这个事件发生后   就会去调用bb这方法 处理这个事件

-->


	<body>
		<!-- 子组件中的事件想让父组件知道，这个更常见 -->
		<div id="app">
			<!--监听自定义事件，并触发自己定义的方法处理子组件的自定义事件-->
			    <!--在这里会默认接收子组件发送的自定义事件里面的参数-->
			<cpn v-on:item-click="cpnClick"></cpn>
		</div>
		
		<!-- 子组件模板 -->
		<template id="cpn">
			<div>
				<button :id="item.id" v-for="(item,index) of categories" @click="btnClick(item,index)">{{item.name}}</button>
			</div>
		</template>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const cpn = {
				template: '#cpn',
				data(){
					return {
						categories:[
							{id:'aaa',name:'热门推荐'},
							{id:'bbb',name:'手机数码'},
							{id:'ccc',name:'家用电器'},
							{id:'ddd',name:'手机办公'},
						]
					}
				},
				methods:{
					btnClick(item,index){
						console.log(item);
						//发射自定义事件
						this.$emit('item-click',item,index);
					}
				}
			}



			const app = new Vue({
				el: '#app',
				data: {
					message: 'hello',
					
				},
				components:{
					cpn
				},
				methods:{
					cpnClick(index,item){
						console.log(index,"----",item);
					}
				}
			});
		</script>
	</body>
</html>
